
<template>
  <div>
    <city-head></city-head>
    <city-saech :cities="cities"></city-saech>
    <city-list 
      :hotCities="hotCities" 
      :cities="cities" 
      :letter="letter"
    >
    </city-list>
    <city-alphablet 
      :cities="cities" 
      @LetterClick="alphabletClick"
    >
    </city-alphablet>
  </div>
</template>

<script>
import CityHead  from "./components/head.vue"
import CitySaech  from "./components/Seach.vue"
import CityList  from "./components/List.vue"
import CityAlphablet  from "./components/Alphablet.vue"
import axios from 'axios'
export default {
  name: "city",
  components: {
    CityHead,
    CitySaech,
    CityList,
    CityAlphablet
  },
  data() {
    return {
      hotCities: [],
      cities: {},
      letter:""
    }
  },
  mounted () {
    this.gitCityInfo()
  },
  methods: {
    gitCityInfo(){
      axios.get("/traver/mock/city.json")
          .then(this.getCityInfoSu)
      // axios.get("/api/city.json")
      //     .then(this.getCityInfoSu)
    },
    getCityInfoSu(res){
      res = res.data
      if (res.ret == true && res.data) {
        const data = res.data
        this.hotCities = data.hotCities
        this.cities = data.cities
      }
    },
    alphabletClick(e){
      this.letter = e
    }
   }
  }
</script>

<style lang="stylus" scoped>

</style>

